import React, { useState } from 'react';
import { motion } from 'framer-motion';

// 定义指南类型
interface Guide {
  id: string;
  title: string;
  category: string;
  summary: string;
  content: string[];
  icon: string;
}

// 指南数据
const guides: Guide[] = [
  {
    id: 'daily-life',
    title: '日常生活减碳指南',
    category: '生活方式',
    summary: '通过简单的日常生活习惯改变减少碳足迹',
    icon: '🏠',
    content: [
      '### 节约用电',
      '- 不使用电器时拔掉插头，避免待机耗电',
      '- 将空调温度设置在最舒适但又节能的水平（夏季26°C，冬季20°C）',
      '- 选择节能电器，优先使用能效等级为1级或2级的产品',
      '- 尽量使用自然光，减少不必要的照明',
      '',
      '### 节约用水',
      '- 洗澡时间控制在5-10分钟内',
      '- 修理漏水的水龙头和管道',
      '- 收集雨水用于浇花或清洁',
      '- 使用节水型马桶和水龙头',
      '',
      '### 垃圾分类和减量',
      '- 学习并严格执行垃圾分类',
      '- 减少一次性物品的使用，选择可重复使用的替代品',
      '- 尽量选择无包装或简约包装的产品',
      '- 将有机废物堆肥，用于家庭花园'
    ]
  },
  {
    id: 'food-carbon',
    title: '低碳饮食指南',
    category: '饮食',
    summary: '通过改变饮食习惯减少食物生产和运输产生的碳排放',
    icon: '🍽️',
    content: [
      '### 选择当地和季节性食物',
      '- 优先购买当地生产的食物，减少运输产生的碳排放',
      '- 根据季节选择新鲜食材，避免温室种植和长途运输',
      '- 参加社区支持农业（CSA）项目，直接从农场获取食物',
      '',
      '### 减少肉类消费',
      '- 尝试每周至少一天素食',
      '- 当食用肉类时，选择更环保的种类，如鸡肉而非牛肉',
      '- 增加植物蛋白的摄入，如豆类、坚果和全谷物',
      '',
      '### 减少食物浪费',
      '- 合理计划购物清单，避免过度购买',
      '- 正确储存食物，延长保鲜期',
      '- 创造性地利用剩菜剩饭',
      '- 了解食物标签上的"最佳食用期"和"保质期"的区别'
    ]
  },
  {
    id: 'transportation',
    title: '绿色出行指南',
    category: '交通',
    summary: '选择更环保的交通方式，减少交通产生的碳排放',
    icon: '🚲',
    content: [
      '### 选择低碳交通工具',
      '- 短距离出行选择步行或骑自行车',
      '- 使用公共交通工具如公交车、地铁等',
      '- 考虑拼车或共享出行服务',
      '- 如果条件允许，选择电动汽车而非传统燃油车',
      '',
      '### 优化驾驶习惯',
      '- 保持稳定速度，避免急加速和急刹车',
      '- 定期检查轮胎气压，确保在推荐范围内',
      '- 减少怠速时间，停车超过30秒时关闭发动机',
      '- 减轻车辆负荷，移除不必要的物品',
      '',
      '### 规划出行路线',
      '- 提前规划路线，避开拥堵路段',
      '- 合并多个出行目的，减少总行程',
      '- 使用导航应用选择最省油的路线',
      '- 考虑远程工作或视频会议，减少不必要的商务旅行'
    ]
  },
  {
    id: 'energy-saving',
    title: '家庭节能指南',
    category: '居住',
    summary: '通过改善家居环境和能源使用方式减少家庭碳排放',
    icon: '💡',
    content: [
      '### 提升家居能效',
      '- 为房屋增加绝缘材料，减少能量流失',
      '- 安装双层玻璃窗，提高保温效果',
      '- 选择高效照明系统，使用LED灯替代传统灯泡',
      '- 定期清洁和维护家电设备，保持最佳运行效率',
      '',
      '### 可再生能源利用',
      '- 考虑安装太阳能板，为家庭提供清洁电力',
      '- 使用太阳能热水器替代传统电热水器',
      '- 了解您所在地区的绿色能源计划，可能可以选择使用可再生能源供电',
      '',
      '### 智能家居系统',
      '- 安装可编程恒温器，根据需要自动调节温度',
      '- 使用智能电表监控家庭能源使用情况',
      '- 考虑智能插座和开关，可远程控制和定时关闭设备',
      '- 利用自然通风和采光，减少空调和照明的使用'
    ]
  },
  {
    id: 'consumption',
    title: '可持续消费指南',
    category: '消费',
    summary: '通过改变购物习惯和消费方式减少碳足迹',
    icon: '🛒',
    content: [
      '### 减少、重用、回收',
      '- 在购买新物品前考虑是否真正需要',
      '- 选择二手物品，延长产品生命周期',
      '- 建立家庭回收系统，确保可回收物品得到正确处理',
      '- 修理而非丢弃损坏的物品',
      '',
      '### 可持续购物',
      '- 选择有环保认证的产品和品牌',
      '- 使用可重复使用的购物袋，避免塑料袋',
      '- 购买耐用品而非一次性产品',
      '- 关注产品的生命周期评估，选择整体环境影响小的产品',
      '',
      '### 数字减碳',
      '- 减少不必要的数字设备使用和更新频率',
      '- 清理邮箱和云存储，减少数据中心能耗',
      '- 降低视频流媒体质量，减少数据传输',
      '- 延长电子设备使用寿命，减少电子垃圾'
    ]
  }
];

export const ActionGuides: React.FC = () => {
  const [selectedGuide, setSelectedGuide] = useState<Guide | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  
  // 获取所有类别
  const categories = Array.from(new Set(guides.map(guide => guide.category)));
  
  // 过滤指南
  const filteredGuides = guides.filter(guide => {
    const matchesSearch = searchTerm === '' || 
      guide.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
      guide.summary.toLowerCase().includes(searchTerm.toLowerCase());
    
    const matchesCategory = selectedCategory === null || guide.category === selectedCategory;
    
    return matchesSearch && matchesCategory;
  });
  
  // 渲染Markdown内容
  const renderContent = (content: string[]) => {
    return content.map((line, index) => {
      if (line.startsWith('### ')) {
        return <h3 key={index} style={{ color: '#2E8B57', marginTop: '20px' }}>{line.replace('### ', '')}</h3>;
      } else if (line.startsWith('- ')) {
        return <li key={index} style={{ marginBottom: '8px' }}>{line.replace('- ', '')}</li>;
      } else if (line === '') {
        return <div key={index} style={{ height: '10px' }}></div>;
      } else {
        return <p key={index}>{line}</p>;
      }
    });
  };
  
  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      {selectedGuide ? (
        <div style={{ 
          backgroundColor: 'white',
          borderRadius: '12px',
          padding: '30px',
          boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
            <h2 style={{ color: '#2E8B57', margin: 0 }}>{selectedGuide.icon} {selectedGuide.title}</h2>
            <button
              onClick={() => setSelectedGuide(null)}
              style={{
                border: 'none',
                background: 'none',
                padding: '5px',
                cursor: 'pointer',
                fontSize: '16px'
              }}
            >
              ←返回指南列表
            </button>
          </div>
          
          <div style={{ 
            padding: '15px', 
            backgroundColor: '#F1F8E9', 
            borderRadius: '8px',
            marginBottom: '20px' 
          }}>
            <p style={{ margin: 0, color: '#558B2F' }}>{selectedGuide.summary}</p>
          </div>
          
          <div style={{ color: '#333' }}>
            {renderContent(selectedGuide.content)}
          </div>
        </div>
      ) : (
        <>
          <div style={{ marginBottom: '30px' }}>
            <h2 style={{ color: '#2E8B57', marginBottom: '10px' }}>低碳生活行动指南</h2>
            <p style={{ color: '#666' }}>
              探索我们的低碳生活指南，学习如何通过日常行动减少碳足迹，保护地球环境。
              请选择下面的指南类别，获取详细的实践建议。
            </p>
          </div>
          
          <div style={{ marginBottom: '30px' }}>
            <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
              <input
                type="text"
                placeholder="搜索指南..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                style={{
                  flex: 1,
                  padding: '10px 15px',
                  borderRadius: '8px',
                  border: '1px solid #ccc',
                  fontSize: '16px'
                }}
              />
            </div>
            
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
              <button
                onClick={() => setSelectedCategory(null)}
                style={{
                  padding: '8px 15px',
                  borderRadius: '20px',
                  border: 'none',
                  backgroundColor: selectedCategory === null ? '#4CAF50' : '#E8F5E9',
                  color: selectedCategory === null ? 'white' : '#4CAF50',
                  cursor: 'pointer',
                  fontWeight: 'bold'
                }}
              >
                全部
              </button>
              {categories.map(category => (
                <button
                  key={category}
                  onClick={() => setSelectedCategory(category)}
                  style={{
                    padding: '8px 15px',
                    borderRadius: '20px',
                    border: 'none',
                    backgroundColor: selectedCategory === category ? '#4CAF50' : '#E8F5E9',
                    color: selectedCategory === category ? 'white' : '#4CAF50',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                  }}
                >
                  {category}
                </button>
              ))}
            </div>
          </div>
          
          <div style={{ 
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
            gap: '20px'
          }}>
            {filteredGuides.map(guide => (
              <motion.div
                key={guide.id}
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.98 }}
                style={{
                  backgroundColor: 'white',
                  borderRadius: '12px',
                  padding: '20px',
                  boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
                  cursor: 'pointer',
                  height: '220px',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  position: 'relative',
                  overflow: 'hidden'
                }}
                onClick={() => setSelectedGuide(guide)}
              >
                <div>
                  <div style={{ 
                    fontSize: '40px', 
                    marginBottom: '10px',
                    textAlign: 'center'
                  }}>
                    {guide.icon}
                  </div>
                  <h3 style={{ 
                    color: '#2E8B57', 
                    textAlign: 'center',
                    margin: '10px 0'
                  }}>
                    {guide.title}
                  </h3>
                  <p style={{ 
                    color: '#666', 
                    fontSize: '14px',
                    textAlign: 'center'
                  }}>
                    {guide.summary}
                  </p>
                </div>
                
                <div style={{
                  backgroundColor: '#E8F5E9',
                  color: '#2E8B57',
                  padding: '5px 10px',
                  borderRadius: '4px',
                  display: 'inline-block',
                  fontSize: '12px',
                  position: 'absolute',
                  top: '15px',
                  right: '15px'
                }}>
                  {guide.category}
                </div>
              </motion.div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}; 